<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<link rel="stylesheet" href="../css/jquery.ui.dialog.css">
<script src="${initParam.root }/js/jquery.cookie.js"></script>
<style>
	#dialog{
		font-size: 62.5%;
		background-image:url(${initParam.root}/img/merrycristmas.JPG);
	}
	
	#dialog p{
		color: red;
		font-weight:bolder;
		font-size: x-large;
	}
	#open-datepicker{
		text-align: center;
		border-width: 1px 0 0 0;
		background-image: none;
		margin-top: .5em;
		padding: .3em 1em .5em .4em;
		font-size: large;
	}
	
	
	<!--  -->
	
	.image_list {overflow: hidden;position: relative;height: 300px;width: 950px; border:1px solid #e1e1e1; cursor:pointer; clear:both;}
.image_list .images {position:absolute; display:none; }
ul, li {list-style:none; margin:0; padding:0; font-size:10pt; }
.ul_label {width:600px;cursor:pointer;border-bottom:1px solid #e1e1e1;}
.ul_label li {width:1100px;float:left;border-right:1px solid #e1e1e1;padding:1px;}
.ul_label li.fir {border-left:0px solid #e1e1e1;}

.no_label {width:600px;cursor:pointer;}
.no_label li {width:30px;height:30px;float:left}


.ul_label li.labelOverClass {font-weight:bold;}
	</style>
<script>
	$(function() {
		//$.cookie('showDialog', null);
		if ($.cookie('showDialog') == undefined || $.cookie('showDialog') == null || $.cookie('showDialog') != 'false') {
		var dialog = $( "#dialog" ).dialog({
				modal: true,
				width: 410,
				position: [400,10],
				buttons: [
					{
						click: function() {
							$( this ).dialog( "close" );
							$.cookie('showDialog', 'false', { expires: 1 });
						},
						icons: {
							primary: "ui-icon-cancel"
						},
						text: "오늘 하루 그만 보기",
						showText: false
					}
				]
			}).dialog("option", "height", 600).click(function(){
				location.href="${initParam.root}/getProductInfo.do?productId=32";
			}),

			datepickerDialog = $( "#dialog-datepicker" ).dialog({
				autoOpen: false,
				modal: true
			}),

			autocompleteDialog = $( "#dialog-autocomplete" ).dialog({
				autoOpen: false,
				modal: false,
				width: 600
			});

		$( "#open-dialog" ).click(function() {
			dialog.dialog( "open" );
		});

		$( "#open-datepicker" ).click(function() {
			datepickerDialog.dialog( "open" );
		});

		$( "#open-autocomplete" ).click(function() {
			autocompleteDialog.dialog( "open" );
		});

		$( "#datepicker" ).datepicker();

		$( "#destroy-dialog" ).click(function() {
			dialog.dialog( "destroy" ).show();
			$( this ).remove();
		});

		$( document ).tooltip();
		}
	});
	<!-- -->
	
	function RollImage(json){
		//이미지 롤링 설정값
		var config = {
			currentImg : 0,
			nextImg : 1,
			listArea : e(json.list_area),
			imageList : e(json.list_area).getElementsByTagName("DIV"),
			imgCnt : e(json.list_area).getElementsByTagName("DIV").length-1, //0부터 시작
			rollTime : json.roll_time,
			moveTime : json.move_time,
			coordX1 : 0,
			coordX2 : e(json.list_area).offsetWidth,
			coordY : e(json.list_area).offsetHeight,
			moveAt : json.moveAt,
			direction : json.direction,
			label : e(json.label),
			labelType : json.labelType
		};
		
		labelBind(config); //라벨(버튼) 바인드
		setRoll(config); //롤링 시작
		rollPause(config); //마우스 오버시 롤링 멈춤
		
		//이미지 롤링 기본 세팅하기
		function setRoll(c){
			c.coordX1 = 0;
			c.coordX2 = c.listArea.offsetWidth;
			c.coordY = c.listArea.offsetHeight;

			if(c.direction=="right" || c.direction=="down"){
				c.coordX2 = c.coordX2 * -1;
				c.coordY = c.coordY * -1;
			}
			
			c.imageList[c.nextImg].style.display = "block";
			setPosition(c);
			rollOver(c)
			//c.imageList[c.nextImg].style.left = c.coordX2+"px";
			
			c.rollTimer = setTimeout(function(){imgMove(c)},c.rollTime);
		};

		//이미지를 움직이게 한다.
		function imgMove(c){
			if(c.direction == "left" || c.direction == "right"){
				c.imageList[c.currentImg].style.left = c.coordX1 + "px";
				c.imageList[c.nextImg].style.left = c.coordX2 + "px";
			}else if(c.direction == "up" || c.direction == "down"){
				c.imageList[c.currentImg].style.top = c.coordX1 + "px";
				c.imageList[c.nextImg].style.top = c.coordY + "px";
			}
			//alert(c.imageList[c.nextImg].style.left);
			var moveAt = parseInt(c.moveAt);
			if (c.direction == "left"){
				c.coordX1 -= moveAt;
				c.coordX2 -= moveAt;
			}else if(c.direction == "right"){
				c.coordX1 += moveAt;
				c.coordX2 += moveAt;
			}else if(c.direction=="up"){
				c.coordX1 -= moveAt;
				c.coordY -= moveAt;
			}else if(c.direction=="down"){
				c.coordX1 += moveAt;
				c.coordY += moveAt;
			}
			
			//if(c.coordX1 < (-1*c.listArea.offsetWidth) ) {
			if( isNextImgRoll(c) ) {
				c.currentImg = c.nextImg;
				c.nextImg += 1;
				if(c.currentImg == c.imgCnt) c.nextImg = 0;
				clearTimeout(c.moveTimer);
				clearTimeout(c.rollTimer);
				setRoll(c);
				return;
			}
			c.moveTimer = setTimeout(function(){imgMove(c)},c.moveTime);
		};
		
		//다음 이미지 롤링 해야하는지 확인
		function isNextImgRoll(c){
			var d = c.direction;
			if(d=="left" && c.coordX2 < 0 ) return true;
			else if(d=="right" && c.coordX2 > 0) return true;
			else if(d=="up" && c.coordY < 0 ) return true;
			else if(d=="down" && c.coordY > 0) return true;

			return false
		};

		//롤링 방향에 따른 두번째 이미지 위치 좌표 설정
		function setPosition(c){
			var d = c.direction;
			if(d=="left") c.imageList[c.nextImg].style.left = c.listArea.offsetWidth+"px";
			else if(d=="right") c.imageList[c.nextImg].style.left = (-1 * c.listArea.offsetWidth) + "px";
			else if(d=="up") c.imageList[c.nextImg].style.top = c.listArea.offsetHeight + "px";
			else if(d=="down") c.imageList[c.nextImg].style.top = (-1 * c.listArea.offsetHeight) + "px";

			//alert(c.imageList[c.nextImg].style.left);
		};
		
		//onmouseover 시 움직임 멈춤
		function rollPause(c){
		//alert(c.listArea.onmouseover);
			c.listArea.onmouseover = function(){
				clearTimeout(c.rollTimer);
			}

			c.listArea.onmouseout = function(){
				//alert("c.listArea.onmouseout");
				setRoll(c);
			}
		};

		//라벨과 바인드
		function labelBind(c){
			if(c.label == null) return; //라벨을 사용하지 않으면 아래는 실행되지 않는다.
			var labels = c.label.getElementsByTagName(c.labelType);

			c.label.onmouseover = function(event){ //라벨영역에 마우스가 오면
				var evt = event || window.event;
				var t = evt.target || evt.srcElement;
				for(n in labels){ 
					if(labels[n] == t){
						//c.imageList[c.currentImg].style.display = "none";
						c.currentImg = parseInt(n);
						c.nextImg = parseInt(n)+1;
						if(c.currentImg == c.imgCnt) c.nextImg = 0;
						clearTimeout(c.rollTimer);
						viewImg(c);
						rollOver(c);
						break;
					}
				}
				//alert(event.srcElement)
			}
			
			c.label.onmouseout = function(event){
				var evt = event || window.event;
				var t = evt.target || evt.srcElement;
				for(n in labels){
					if(labels[n]==t){
						setRoll(c);
						break;
					}
				}
			}
		};

		//라벨 onmouseover 시 클래스 적용
		function rollOver(c){
			if(c.label == null) return;
			var els = c.label.getElementsByTagName(c.labelType);
			
			if(c.labelType == "img"){
				
				for(n in els){
					if(typeof els[n] == "object"){
						if(n == c.currentImg){
							els[n].src = els[n].getAttribute("oversrc");
						}else{
							els[n].src = els[n].getAttribute("outsrc");
						}
					}
				}
			}else{
				for(n in els){
					if(typeof els[n] == "object"){
						if(n == c.currentImg){
							var ocss = els[n].className;
							els[n].className = ocss+" "+els[n].getAttribute("overcss");
						}else{
							els[n].className = els[n].getAttribute("outcss");
						}
					}
				}
			}
		}

		//라벨에서 선택된 이미지 보이기
		function viewImg(c){
			//alert(c.currentImg);
			for(n=0; n<c.imgCnt+1; n++)	{
				c.imageList[n].style.display = "none";
			}
			
			c.imageList[c.currentImg].style.left = "0px";
			c.imageList[c.currentImg].style.top = "0px";
			c.imageList[c.currentImg].style.display = "block";
		};
	}

	function debug(t){
	e("dis").innerHTML = t + "<br>";
	}

	//id값으로 객체 반환
	function e(id){
		var o = document.getElementById(id);
		if(typeof o == undefined || o == null) { return null;}

		return o;
	}
	</script>
</head>

<div id="dialog" title="christmas event !">
</div>

<!--  -->

<body>
<!-- 
<div class="image_list" id="image_list_1">
	<div class="images" style="display:block"><img src="img/koction1.jpg" width="900" height="300"/></div>
	<div class="images"><img src="img/koction2.jpg" width="900" height="300"/></div>
	<div class="images"><img src="img/koction3.jpg" width="900" height="300"/></div>
	<div class="images"><img src="img/koction7.jpg" width="900" height="300"/></div>
	<div class="images"><img src="img/koction5.jpg" width="900" height="300"/></div>
</div>
<p>&nbsp;</p> -->

<div class="image_list" id="image_list_2">
	<div class="images" style="display:block"><a href="${initParam.root}/getProductInfo.do?productId=41"><img src="img/koction16.jpg" width="950" height="300"/></a></div>
	<div class="images"><a href="${initParam.root}/getProductInfo.do?productId=34"><img src="img/koction14.jpg" width="950" height="300"/></a></div>
	<div class="images"><a href="${initParam.root}/getProductInfo.do?productId=42"><img src="img/koction19.png"  width="950" height="300"/></a></div>
	<div class="images"><a href="${initParam.root}/getProductInfo.do?productId=44"><img src="img/koction18.png"  width="950" height="300"/></a></div>
	<div class="images"><a href="${initParam.root}/getProductInfo.do?productId=36"><img src="img/koction20.png"  width="950" height="300"/></a></div>
</div>

<!-- <div class="image_list" id="image_list_3">
	<div class="images" style="display:block"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/google.jpg" /></div>
	<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/daum.jpg" /></div>
	<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/naver.jpg" /></div>
	<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/nate.jpg" /></div>
	<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/yahoo.jpg" /></div>
</div>

<ul class="no_label" id="label_3">
	<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1_on.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1.jpg" /></li>
	<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2.jpg" /></li>
	<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3.jpg" /></li>
	<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4.jpg" /></li>
	<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5.jpg" /></li>
</ul> -->




<script type="text/javascript">
<!--
var j1 = {
	"list_area":"image_list_2",
	"moveAt":"50",
	"roll_time":"3000",
	"move_time":"100",
	"direction":"up",
	"label":"",
	labelType : ""
};
new RollImage(j1);
var j2 = {
	"list_area":"image_list_1",
	"moveAt":"100",
	"roll_time":"3000",
	"move_time":"100",
	"direction":"left",
	"label":"label_2",
	labelType : "li"
};
new RollImage(j2);
var j3 = {
	"list_area":"image_list_3",
	"moveAt":"100",
	"roll_time":"3000",
	"move_time":"100",
	"direction":"right",
	"label":"label_3",
	labelType : "img"
};
new RollImage(j3);
//oj1.setRoll();
//-->
</script>
</body>
